<template>
	<div>
		<p style="margin-top: -60px;"></p>
		<van-icon name="arrow-left" v-tap="{methods:back}" class="more more1" size="20px" color="#ddd"/>
		<van-icon name="shopping-cart-o" :overlay='false' v-tap="{methods:onClickCart}" class="more more2" size="20px" color="#ddd"/>
		<van-swipe  indicator-color="white" :show-indicators=false
		:touchable=true>

		  <van-swipe-item><img :src="detaillist.pimg" class="detailpimg" alt=""></van-swipe-item>
		  <van-swipe-item><img :src="detaillist.pimg" class="detailpimg" alt=""></van-swipe-item>
		  <van-swipe-item><img :src="detaillist.pimg" class="detailpimg" alt=""></van-swipe-item>
		  <van-swipe-item><img :src="detaillist.pimg" class="detailpimg" alt=""></van-swipe-item>
		</van-swipe>


		<van-panel class="left1" :title="detaillist.pname" :desc="'￥'+detaillist.pprice" :status="'已售'+detaillist.uid+title1">

	<!-- 	<van-panel class="left1" :title="detaillist.pname" :desc="detaillist.pdesc" :status="'已售'+detaillist.uid+title1"> -->
		  <van-coupon-cell
		    :coupons="coupons"
		    :chosen-coupon="chosenCoupon"
		    @click="showList = true"
		  />
		  <!-- 优惠卷列表 -->
		  <van-popup v-model="showList" position="bottom">
		    <van-coupon-list
		      :coupons="coupons"
		      :chosen-coupon="chosenCoupon"
		      :disabled-coupons="disabledCoupons"
		      @change="onChange"
		      @exchange="onExchange"
		    />
		  </van-popup>
		</van-panel>

			<van-cell  >
			  <!-- 使用 title 插槽来自定义标题 -->
			  <van-tag plain type="warning">快递免费</van-tag>
			  <template slot="title">
			    <span class="custom-title">配送方式</span>
			  </template>
			</van-cell>


		    <van-goods-action>
		      <van-goods-action-icon v-tap="{methods:kefu}" icon="chat-o">
		        客服
		      </van-goods-action-icon>
		      <van-goods-action-icon icon="cart-o" v-tap="{methods:onClickCart}">
		        购物车
		      </van-goods-action-icon>
		      <van-goods-action-button type="warning" v-tap="{methods:addcart}">
		        加入购物车
		      </van-goods-action-button>
		      <van-goods-action-button type="danger" v-tap="{methods:addcarts}">
		        立即购买
		      </van-goods-action-button>
		    </van-goods-action>


		<van-popup
		  v-model="dropdown"
		  round
		  position="bottom"
		  v-tap="{methods:updown}"
		  :style="{ height: '20%' }"
		/>

		<van-action-sheet v-model="show" >
			<div class="commodity">
				<img :src="detaillist.pimg" alt="">
				<div>
					<h2>￥{{detaillist.pprice}}</h2>
					<p>库存{{detaillist.uid}}件</p>
					<!-- <span>选择 尺寸 颜色</span> -->
				</div>
				<van-icon name="close" size='20px' v-tap="{methods:close}" class="close"/>

			</div>
			<div class="select">
				<div class="num">
					<p>购买数量({{ptit}})</p>
					<van-stepper v-model="value" input-width="40px" button-size="32px" />
				</div>
				<van-divider />
				<van-button type="primary" @click="nowbuy" class="ok" size="large" >确定</van-button>
			</div>
		</van-action-sheet>

    <van-action-sheet v-model="show2" >
    	<div class="commodity">
    		<img :src="detaillist.pimg" alt="">
    		<div>
    			<h2>￥{{detaillist.pprice}}</h2>
    			<p>库存{{detaillist.uid}}件</p>
    			<!-- <span>选择 尺寸 颜色</span> -->
    		</div>
    		<van-icon name="close" size='20px' v-tap="{methods:close}" class="close"/>

    	</div>
    	<div class="select">
    		<div class="num">
    			<p>购买数量({{ptit}})</p>
    			<van-stepper v-model="value" input-width="40px" button-size="32px" />
    		</div>
    		<van-divider />
    		<van-button type="primary" @click="nowbuy2" class="ok" size="large" >确定</van-button>
    	</div>
    </van-action-sheet>


	</div>
</template>

<script>
	import * as api from '../api/getProlist'
	const coupon = {
	  available: 1,
	  condition: '无使用门槛\n最多优惠12元',
	  reason: '',
	  value: 150,
	  name: '优惠券名称',
	  startAt: 1489104000,
	  endAt: 1514592000,
	  valueDesc: '1.5',
	  unitDesc: '元',
	}
	export default{
		name:'Detail',
		data(){
			return{
        radio:'1',
				detaillist:'',
				title1:'件',
				show:false,
        show2:false,
				dropdown:false,
				ptit:'每人限购10件',
				value:1,
				chosenCoupon: -1,
				coupons: [coupon],
				disabledCoupons: [coupon],
				showList:false,
				size:''
			}
		},
		methods:{
			formatPrice() {
			      return '¥' + (this.detaillist.pprice / 100).toFixed(2);
			    },
			    onClickCart() {
			      this.$router.push('/cart');
			    },
			   nowbuy(){
				  this.$toast.success('加入购物车成功');
				  this.show=false;
				  console.log(this.value)
				  if(this.value==''){
					  this.value=1
				  }
				  api.addCart({pid:this.$route.params.id,uid:localStorage.getItem('uid'),pnum:this.value}).then((data)=>{
					  console.log(data.data)
				  })
			   },

				addcart(){
					this.show=true
				},

				back(){
					this.$router.go(-1)
				},
				updown(){
					this.dropdown=true
				},
        kefu(){
          this.$router.push('/service');
        },
				close(){
					this.show=false
				},
		  onChange(index) {
			  this.showList = false;
			  this.chosenCoupon = index;
			},
			onExchange(code) {
			  this.coupons.push(coupon);
			},
      nowbuy2(){
        this.$router.push('/order')
			},
      addcarts(){
        this.show2=true
      },
		},
		mounted() {
			// console.log(this.$route)
			api.getDetail({id:this.$route.params.id}).then((data)=>{
				this.detaillist=data.data.data
		})
		},
	}
</script>

<style scoped="">
    div >>>	.detailpimg{
		width: 373px;
		height: 405px;
    /* margin-top: -30px; */
		background: #fff;
	}
    div >>>	.van-swipe__track{
		background:royalblue;
	}
	.more{
		position: absolute;
		z-index: 99;
		top: 10px;
		right: 10px;
		background: rgba(0,0,0,.6);
		width: 30px;
		height:30px;
		text-align: center;
		line-height:30px;
		border-radius: 50%;
	}
	.more1{
		left: 10px;
	}
	.van-action-sheet{
		width: 100%;
		height: 250px;
		padding: 10px;
    /* box-sizing: border-box; */
	}
	.van-action-sheet img{
		width: 150px;
		height: 120px;
		border-radius: 5px;
		margin-right: 10px;
	}
	.commodity{
		display: flex;

	}
	.commodity h2{
		color: #FF0036;
	}
	.commodity p:nth-of-type(1){
		color: #051b28;
	}
	.close{
		position: absolute;
		top: 20px;
		right: 40px;
	}
	.btn{
		text-align: center;
		height:34px;
		border: 1px solid #f1f1f1;
		background: #f1f1f1;
		line-height: 34px;
		color: #555;
	}
  .ok{
    position: absolute;
    bottom: 0;
    left: 0;
  }
	.num{
		display: flex;
		justify-content: space-between;
		padding: 0 20px;
	}
	.ok{
		background-image: linear-gradient(to right, #FF7A00, #FE560A);
		border: 0;
		margin-left:-10px;
	}
	.van-popup--top{
		background: red;
	}
  .btn[data-v-40f4caea]{
    background: red;
  }
</style>
